import React, { Component, useState } from 'react'
import {
  SafeAreaView, // 适配有刘海的屏幕
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Button,
  Alert,
  Switch,
  ActivityIndicator,
  Platform,
  Image,
  Dimensions,
  SectionList, // 支持分组
} from 'react-native'

export default function index() {

  const [dataList, setDataList] = useState([])

  return (
    <SafeAreaView style={[styles.container]}>
      <SectionList
        style={{ margin: 10 }}
        sections={dataList}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => {
          console.log('renderItem ->', item)
          return (
            <View style={styles.item}>
              <Text style={styles.title}>{item}</Text>
            </View>
          )
        }}
        renderSectionHeader={({ section: { title } }) => {
          console.log('renderSectionHeader ->', { section: { title } })
          return (
            <Text style={styles.header}>{title}</Text>
          )
        }}
        ItemSeparatorComponent={() => ( // 分隔
          <View style={{ borderBottomWidth: 1, borderBottomColor: '#5e7ce0' }} />
        )}
        ListEmptyComponent={() => (
          <View>
            <Text style={[{ fontSize: 30 }, { textAlign: 'center' }]}>空空如也</Text>
          </View>
        )}
        ListHeaderComponent={() => (
          <Text style={[{ fontSize: 30 }, { textAlign: 'center' }]}>王者荣耀超秀英雄 ~</Text>
        )}
        refreshing={false}
        onRefresh={() => {
          setDataList(
            [
              {
                title: '刺客',
                data: ['云缨', '镜', '阿珂']
              },
              {
                title: '坦克',
                data: ['亚瑟', '项羽', '夏洛特']
              },
              {
                title: '法师',
                data: ['甄姬', '王昭君', '妲己', '小乔', '安琪拉']
              },
              {
                title: '射手',
                data: ['鲁班7号', '后羿', '虞姬']
              },
              {
                title: '辅助',
                data: ['蔡文姬', '东皇', '张良']
              }
            ]
          )
        }}
        onEndReached={() => {
          alert('到底了 ~')
        }}
      />
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    backgroundColor: '#6ae',
    padding: 20,
    marginVertical: 8,
  },
  header: {
    fontSize: 32,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
  },
})
